import React from 'react';
import GlobalContext from '../../util/GlobalContext';

// export default function Child2() {
//   return (
//     <div>
//        {/* 消费者 */}
//        <GlobalContext.Consumer>
//        {
//           context => {
//             return <div>
//               {context.state.name} - {context.state.age} - {context.state.sex}
//             </div>
//           }
//         }
//       </GlobalContext.Consumer>
//     </div>
//   )
// }
 
export default class Child2 extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      type: '111'
    }
  }
  // 是否先渲染父组件传入的props
  static getDerivedStateFromProps(nextProps, prevState) {
    // console.log(prevState, nextProps) // 111, 123
    const { type } = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (type !== prevState.type) {
      return {
          type
      };
    }
    // 否则，对于state不进行任何操作
    return null;
  }

  render () {
    return (
      <div>
         {/* 消费者 */}
         <GlobalContext.Consumer>
         {
            context => {
              return <div>
                {context.state.name} - {context.state.age} - {context.state.sex} --{this.state.type}
              </div>
            }
          }
        </GlobalContext.Consumer>
      </div>
    )
  }
}